<div class="toasts-container">
  <ngb-toast
    *ngFor="let toast of toasts$ | async"
    [class]="'toast-' + toast.type"
    [autohide]="true"
    [delay]="5000"
    (hide)="removeToast(toast.UUID)"
    (click)="removeToast(toast.UUID)"
  >
    {{ toast.message }}
  </ngb-toast>
</div>

<!-- Page container -->
<div class="d-flex flex-column h-100" @mainFadeIn>
  <!-- Main container (minus footer) -->
  <div class="d-flex flex-fill mh0">
    <app-environments-menu class="h-100"></app-environments-menu>

    <!-- Right "column" = header + routes menu + main-content -->
    <div class="d-flex flex-column flex-fill h-100 position-relative">
      <!-- Header: env name +start / env port + prefix -->
      <app-header></app-header>

      <div
        *ngIf="
          activeEnvironment$ | async as activeEnvironment;
          else noActiveEnvironment
        "
        class="main-content flex-fill mh0 h-100"
      >
        <ng-container [ngSwitch]="activeView$ | async">
          <app-environment-routes
            *ngSwitchCase="'ENV_ROUTES'"
            class="h-100"
          ></app-environment-routes>

          <app-environment-databuckets
            *ngSwitchCase="'ENV_DATABUCKETS'"
            class="h-100"
          ></app-environment-databuckets>

          <app-environment-callbacks
            *ngSwitchCase="'ENV_CALLBACKS'"
            class="h-100"
          >
          </app-environment-callbacks>

          <app-environment-headers
            *ngSwitchCase="'ENV_HEADERS'"
            class="h-100"
          ></app-environment-headers>

          <app-environment-logs
            *ngSwitchCase="'ENV_LOGS'"
            class="h-100 d-flex flex-column"
          ></app-environment-logs>

          <app-environment-proxy
            *ngSwitchCase="'ENV_PROXY'"
            class="h-100"
          ></app-environment-proxy>

          <app-environment-settings
            *ngSwitchCase="'ENV_SETTINGS'"
            class="h-100"
          ></app-environment-settings>
        </ng-container>
      </div>

      <!-- <app-cloud-warning></app-cloud-warning> -->
    </div>
  </div>

  <app-footer></app-footer>
</div>

<ng-template #noActiveEnvironment>
  <div class="flex-fill main-content">
    <p class="message mt-4">No environment opened</p>
  </div>
</ng-template>

<app-tour></app-tour>
